<template>
  <el-form-item class="edit-item edit-item-slider slider-normal">
    <slot name="label">
      <label style="max-width: 95px; line-height: 16px;">
        {{label}}
        <TooltipsCommon v-if="!!tooltips" :tooltips="tooltips"></TooltipsCommon>
      </label>
    </slot>

    <div style="flex: 1;">
      <el-slider
        v-model="modelValue"
        :min="min"
        :max="max"
        :step="step"
        :disabled="toBool(disabled)"
        :show-input="true"
        :show-input-controls="false"
        @change="onChange">
      </el-slider>
      <span v-if="unit">{{unit}}</span>
    </div>
  </el-form-item>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    // 默认值/最小值/最大值/间值/是否可用/单位/标签
    props: {
      value: Number,
      modelValue: Number,
      min: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 0
      },
      step: {
        type: Number,
        default: 1
      },
      disabled: {
        type: Boolean,
        default: false
      },
      unit: String,
      label: String,
      tooltips: String,
    },
    emits: ["change", "update:modelValue"],
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('@/views/components/edit/tooltip-common.vue')),
    },
    methods: {
      onChange(val) {
        this.$emit('change', val);
      },
      toBool(val) {
        return typeof val === "boolean" ? val
          : val === "true" ? true : false;
      }
    },
  }
</script>
